<template>
  <view>
    <uni-popup ref="checkCity">
      <view
        style="
          height: 800rpx;
          width: 100%;
          background-color: white;
          display: flex;
          flex-direction: column;
        "
      >
        <view :style="{ height: height + 'rpx' }"></view>
        <scroll-view style="border-bottom: 1px solid black; flex: 1" scroll-x>
          <view style="height: 100%; display: flex">
            <scroll-view
              scroll-y
              style="width: 140px; border-right: 1px solid black"
              :style="{ height: sheight + 'rpx' }"
              v-for="(item, index) in citys"
              :key="index"
            >
              <view
                v-for="(citem, cindex) in item"
                :key="cindex"
                style="
                  height: 80rpx;
                  width: 140px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
                @click="checkCity(index, citem)"
                :style="{
                  color: checkCitys[index]
                    ? citem.id == checkCitys[index].id
                      ? '#096ce7'
                      : 'black'
                    : '',
                }"
                >{{ citem.name }}</view
              >
            </scroll-view>
          </view>
        </scroll-view>
        <view
          style="
            height: 100rpx;
            display: flex;
            align-items: center;
            justify-content: space-around;
          "
        >
          <view
            style="
              height: 70rpx;
              width: 35%;
              border: 1px solid black;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 40rpx;
            "
            @click="cityReaset"
            >重置</view
          >
          <view
            style="
              height: 70rpx;
              width: 35%;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 40rpx;
              background-color: #096ce7;
              color: white;
            "
            @click="cityOk"
            >确定</view
          >
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { api } from "@/utils/api.js";
export default {
  name: "check-city",
  props: {},
  data() {
    return {
      citys: [],
      checkCitys: [],
    };
  },
  props: {
    height: {
      type: String,
      default: "175",
    },
    sheight: {
      type: String,
      default: "550",
    },
  },
  created() {
    console.log(123);
  },
  methods: {
    cityOk() {
      this.$emit("change", this.checkCitys[this.checkCitys.length - 1]);
      this.$refs.checkCity.close("top");
    },
    cityReaset() {
      this.$emit("change", { id: "", level: "" });
      this.$refs.checkCity.close("top");
    },
    open() {
      this.getAreaList();
      this.$refs.checkCity.open("top");
    },
    async checkCity(e, a) {
      let res = await api.getAreaList({ pid: a.id });
      if (e == 0) {
        this.citys[1] = res.data;
        this.citys[2] = [];

        this.checkCitys[0] = a;
        this.checkCitys.splice(1, this.checkCitys.length - 1);
        this.$forceUpdate();
      } else if (e == 1) {
        this.citys[2] = res.data;
        this.checkCitys[1] = a;
        this.checkCitys.splice(1, this.checkCitys.length - 2);
        this.$forceUpdate();
      } else {
        this.checkCitys[2] = a;
        this.$forceUpdate();
      }
      console.log("数据", this.checkCitys);
    },
    async getAreaList(e) {
      let data = uni.getStorageSync("citys");
      console.log("存储信息", data);
      if (data) {
        this.checkCitys = data;
        let res = await api.getAreaList({ pid: 0 });
        console.log("区县信息", res.data);
        this.$set(this.citys, 0, res.data);
        if (data.length == 1) {
          let ress = await api.getAreaList({ pid: data[0].id });
          console.log("镇信息", ress.data);
          this.$set(this.citys, 1, ress.data);
        } else if (data.length != 0) {
          let ress = await api.getAreaList({ pid: data[0].id });
          console.log("镇信息", ress.data);
          this.$set(this.citys, 1, ress.data);
          let resss = await api.getAreaList({ pid: data[1].id });
          console.log("村信息", resss.data);
          this.$set(this.citys, 2, resss.data);
        }
      } else {
        let res = await api.getAreaList({ pid: 0 });
        console.log("区县信息", res.data);
        this.$set(this.citys, 0, res.data);
        this.citys.splice(1, 2);
      }
    },
    close() {
      this.$refs.checkCity.close();
    },
  },
};
</script>

<style scoped lang="less"></style>
